<template>
  <v-chart ref="charts" class="chart" autoresize />
</template>

<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import VChart from "vue-echarts";
import { ref, watch, onMounted, nextTick } from "vue";
import { useLocaleStore } from "@/store/locales";

let charts = ref();
const useLocale = useLocaleStore();
const props = defineProps({
  option: {
    type: Object,
  },
})
use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
]);
const setChartsOption = (option) => {
  nextTick(() => {
   
    charts.value.setOption({
      color: useLocale.mainColor,
      title: {
        text: option.title,
        left: "center",
      },
        grid:{
    left:'50',
  },
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: option.xAxisData,
        // axisLabel: {
        //   rotate: 30,
        // }
      },
      yAxis: {
        name: option.yAxisName,
        type: "value",
      },
      series: [
        {
          type: "line",
          data: option.seriesData,
        },
      ],
    });
  });
};
onMounted(() => {
  //setChartsOption(props.option);
});
//导出方法给父组件使用
defineExpose({
  setChartsOption,
});
watch(
  () => useLocale.mainColor,
  (newValue, oldValue) => {
     setChartsOption(props.option);
    //console.log("workOrder变化了", newValue, oldValue);
  },
  { immediate: true, deep: true }
);
</script>

<style scoped>
.chart {
  height: 100%;
}
</style>
